<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="box">
          <div class="left">
            <img src="	https://flowbite.com/docs/images/logo.svg" alt="" />
            <h1>马大哈</h1>
          </div>
          <div class="middle">
            <p>
              <router-link
                to="/home/index"
                tag="span"
                :class="{ active_span: $route.path=='/home/index' }"
                >首页</router-link
              >
              <router-link
                to="/home/type"
                tag="span"
                :class="{ active_span: $route.path=='/home/type' }"
                >分类</router-link
              >
              <router-link
                to="/home/tag"
                tag="span"
                :class="{ active_span: $route.path=='/home/tag' }"
                >标签</router-link
              >
              <router-link
                to="/home/file"
                tag="span"
                :class="{ active_span:$route.path=='/home/file' }"
                >归档</router-link
              >
            </p>
          </div>
          <div class="right">
            <div>
              <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
              </el-input>
            </div>

            <span>登录</span>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="box">
          <router-view></router-view>
        </div>
      </el-main>
      <el-footer>
        <div class="box">
          <p>© 2023 Weblog™. All Rights Reserved.</p>
          <p>Provided by 犬小哈</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    getData() {
      this.$axios
        .post("api/archive/list", {
          current: 1,
          size: 10,
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  .el-container {
    .el-header {
      display: flex;
      justify-content: center;
      .box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 1200px;
        .left {
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            padding-right: 10px;
          }
          h1 {
            width: 100px;
            display: flex;
            align-items: center;
          }
        }
        .middle {
          display: flex;
          align-items: center;
          p {
            display: flex;
            justify-content: space-between;

            span {
              padding: 0px 10px;
            }
            span:hover {
              color: blue;
              cursor: pointer;
            }
            .active_span {
              color: blue;
            }
          }
        }
        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;
          div {
            margin-right: 10px;
          }
          span:hover {
            color: blue;
            cursor: pointer;
          }
        }
      }
    }
    .el-main {
      display: flex;
      justify-content: center;
      background-color: #e3e3e3;
      .box {
        width: 1200px;
      }
    }
    .el-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      .box {
        width: 1200px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
